<template>
	<view :class="['refined-tabBar',mode,{'refined-fixed':fixed}]"
		:style="[circleStyle,{'--length':comList.length,'--color':active}]">
		<show-content-scroll :show="showScroll" :left="scrollLeft">
			<view class="refined-wrapper flex-wrap-around" :class="[{'view-scroll':showScroll}]">
				<view class="refined-wrapper-item" v-for="(it,index) in comList"
					:class="[{'active':selectedIndex===index}]" @click="handlerChang(it,index)" :key="index">
					<view v-if="it.icon" :class="['iconfont',it.icon]"></view>
					<image class="img" :src="it.img" v-if="it.img"></image>
					<view class="txt">{{it.name}}</view>
				</view>
			</view>
		</show-content-scroll>
	</view>
</template>

<script>
	import ShowContentScroll from '@/components/ShowContentScroll.vue'
	/**
	 * mode: Rudderinset - 当前只有当前一个模式
	 */
	export default {
		components: {
			ShowContentScroll
		},
		props: {
			mode: String,
			fixed: {
				type: Boolean,
				default: true
			},
			value: {
				type: Number,
				required: true
			},
			storage: String,
			showScroll: Boolean,
			active: {
				type: String,
				default: '#ffffff'
			},
			list: {
				type: Array,
				default: () => ([{
						img: '/static/logo.png',
						name: '首页'
					},
					{
						img: '/static/logo.png',
						name: '分类'
					},
					{
						img: '/static/logo.png',
						name: '我的'
					}
				])
			}
		},
		computed: {
			comList() {
				return [...this.list]
			}
		},
		methods: {
			handlerChang(...ary) {
				const [_, i] = ary;
				if (this.storage) {
					this.$storage.set(this.storage, i);
				}
				this.$emit('tab-bar', ary);
				this.selectedIndex = i;
				this.$emit('input', i);
				this.selectAndAnimate();
			},
			/**
			 * 选择并执行动画
			 */
			selectAndAnimate() {
				// 获取选中元素
				const comp = () => {
					const xe = this.aryPositions[this.selectedIndex > 0 ? this.selectedIndex - 1 : 0];
					this.scrollLeft = parseInt(xe.left - xe.width); // 移动值
					const e = this.aryPositions[this.selectedIndex]
					// 清除之前的动画定时器
					clearInterval(this.circleStyle.clear);
					this.circleStyle.clear = null;

					// 定义动画函数
					const animate = (finalValue) => {
						const speed = finalValue / 30; // 每次变化的速度
						const current = parseInt(this.circleStyle['--l-circle']); // 当前值

						if (current < finalValue) {
							this.circleStyle['--l-circle'] = (current + speed) + 'px'; // 增加
						} else if (current > finalValue) {
							this.circleStyle['--l-circle'] = (current - speed) + 'px'; // 减少
						} else {
							clearInterval(this.circleStyle.clear); // 动画完成，清除定时器
							this.circleStyle.clear = null;
							this.circleStyle['--l-circle'] = finalValue + 'px'; // 设置最终值
						}
					}

					// 设置圆的宽度和高度
					this.circleStyle['--w-circle'] = (e.width / 1.4) + 'px';
					this.circleStyle['--h-circle'] = (e.height / 1.4) + 'px';

					const finalValue = parseInt(e.left + e.width / 2); // 最终值
					this.circleStyle.clear = setInterval(() => animate(finalValue), 0); // 启动动画定时器
				}
				if (this.aryPositions.length) {
					comp();
				} else {
					this.getSelect(['.refined-wrapper-item', 'selectAll'], (rects) => {
						this.aryPositions = rects;
						comp()
					}, 1);
				}

			}
		},
		inject: ['contentStyle'],
		data() {
			return {
				selectedIndex: this.value || 0,
				circleStyle: {
					clear: null,
					'--l-circle': '',
					'--w-circle': '',
					'--h-circle': ''
				},
				scrollLeft: 0,
				aryPositions: []
			};
		},

		mounted() {
			this.getSelect('.refined-tabBar', (e) => { 
				this.$eventBus.emit('RefinedTabBar', e.height);
				this.selectAndAnimate();
			});
		},
	};
</script>

<style scoped>
	.refined-tabBar {
		width: 100%;
		text-align: center;
		box-sizing: border-box;
	}

	.refined-fixed {
		padding-bottom: var(--my-tab-safe-area);
		position: fixed;
		bottom: 0;
		left: 0;
		background: var(--refined-tab-bar-background);
		z-index: var(--date-z-index);
	}

	.refined-wrapper-item .iconfont {
		font-size: 60rpx;
	}

	.view-scroll {
		width: calc((100% / var(--page)) * var(--length));
	}

	.Rudderinset {
		background: radial-gradient(var(--h-circle) at var(--l-circle) top, transparent var(--w-circle), var(--refined-tab-bar-background) 0);
	}

	.active {
		color: var(--color)
	}

	.img {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		transition: 1s;
		transform: translateY(20%) rotateY(360deg);
	}

	.Rudderinset .active .img,
	.Rudderinset .active .iconfont {
		box-shadow: 0 0 0 12rpx #fff;
		transform: translateY(-50%) rotateY(0deg);
	}

	.Rudderinset .active .txt {
		transform: translateY(-20%) rotateY(0deg);
	}
</style>